<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <h1>学习表单</h1>
            姓名：<input type="text" v-model="name"> <br> <br>
            是否单身: <input type="checkbox" name="" id="" v-model="single"> <br> <br>
            性别： 
            <input v-model="gender" type="radio" name="gender" value="1">男  
            <input v-model="gender" type="radio" name="gender" value="0">女 <br> <br>
            所在城市：
            <select v-model="city" name="所在城市：" id="">
                <option  value="cq">重庆</option>
                <option  value="cd">成都</option>
                <option  value="xa">西安</option>
            </select>
            <br> <br>
            自我简介：
            <textarea v-model="comment"></textarea><br>
            <input type="button" @click="submit" value="提交"> 
        </div>

    </div>
    <script src="./vue.js"></script>
    <script>

        const app = new Vue({
            el: '#app',
            data: {
                    name:'',
                    single:'',
                    gender:'',
                    city:'',
                    comment:''

            },
            methods :{
                submit(){
                    console.log(this);
                    
                },
            }
        })
    </script>

    <style>


    </style>
    
</body>
</html>